<template>
	<view class="content">

		<view class="top">
			<view>
				<text>猪舍管理</text>
			</view>
		</view>
		<view class="btns">
			<button @tap="toFeed()" class="toFeed">喂食</button>
			<button @tap="back()" class="back">返回</button>		
		</view>

		<view class="bars">
			<view class="item">
				<view class="symbol">
					<text>湿度</text>
				</view>
				<view class="bar-box">
					<view class="bar-title">
						<text>低</text>
						<text>中</text>
						<text>高</text>
					</view>
					<view class="bar">
						<slider @change=""    disabled="false" value="50" max="100"  min="0" class="s" backgroundColor="rgba(0,0,0,0)" activeColor="rgba(0,0,0,0)" block-color="#b5b5b6" />
					</view>
					<text class="degree">{{wet}}%</text>
				</view>
			</view>

			<view class="item">
				<view class="symbol">
					<text>温度</text>
				</view>
				<view class="bar-box">
					<view class="bar-title">
						<text>低</text>
						<text>中</text>
						<text>高</text>
					</view>
					<view class="bar">
						<slider @change=""   disabled="false" value="20" max="100"  min="0" class="s" backgroundColor="rgba(0,0,0,0)" activeColor="rgba(0,0,0,0)" block-color="#b5b5b6" />
					</view>
					<text class="degree">{{temperate}}℃</text>
				</view>
			</view>

			<view class="item">
				<view class="symbol">
					<text>风量</text>
				</view>
				<view class="bar-box">
					<view class="bar-title">
						<text>低</text>
						<text>中</text>
						<text>高</text>
					</view>
					<view class="bar">
						<slider @change=""  disabled="false" value="0.7" max="1.5"  min="0" class="s" backgroundColor="rgba(0,0,0,0)" activeColor="rgba(0,0,0,0)" block-color="#b5b5b6" />
					</view>
					<text class="degree">{{wind}}m/s</text>
				</view>
			</view>

			<view class="item">
				<view class="symbol">
					<text>细菌</text>
				</view>
				<view class="bar-box">
					<view class="bar-title">
						<text>低</text>
						<text>中</text>
						<text>高</text>
					</view>
					<view class="bar">
						<slider @change=""   disabled="false" value="5" max="10"  min="0" class="s" backgroundColor="rgba(0,0,0,0)" activeColor="rgba(0,0,0,0)" block-color="#b5b5b6" />
					</view>
					<text class="degree">{{bacterium}}x10<sup>4</sup> cfu/m<sup>3</sup></text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'	
	export default {
		computed: {  
			...mapState(['msgs','count'])  
		},		
		onShow() {
				// uni.showModal({
				// 	title:"警告",
				// 	content:"温度过高",
				// 	cancelText:"忽略",
				// 	cancelColor:"#c8c8c8"
				// })
			this.test1();
		},
		data() {
			return {
				temperate:28,
				wind:0.5,
				wet:58,
				bacterium:3
			}
		},
		methods: {
			...mapMutations(['plusCount','addMsg']),			
			back(){
				uni.reLaunch({
					url:"../../factory"
				})
			},
			test1(){
				setTimeout(()=>{
					this.temperate=31;
					var that=this;
					let msg="猪舍温度过高，请立即降温！";
					this.addMsg(msg);
					this.plusCount();
					uni.showModal({
						title:"警告",
						content:"猪舍温度过高，请立即降温！",
						cancelText:"忽略",
						cancelColor:"#c8c8c8",
						success(res) {
							setTimeout(()=>{
								that.test2();
							},2000);	
						}
					})					
				},2000); 
			},
			test2(){
				this.wet=32;
				var that=this;
				let msg="猪舍湿度过高，请尽快干燥些！";
				this.addMsg(msg);
				this.plusCount();				
				uni.showModal({
					title:"警告",
					content:"猪舍湿度过高，请尽快干燥些！",
					cancelText:"忽略",
					cancelColor:"#c8c8c8",
					success(res) {
						that.test3();	
					}
				})
			},
			test3(){
				var that=this;
				
				setTimeout(()=>{
					this.wind=0.3;
					let msg="猪舍风量不足，请尽快通风！";
					this.addMsg(msg);
					this.plusCount();				
				uni.showModal({
					title:"警告",
					content:"猪舍风量不足，请尽快通风！",
					cancelText:"忽略",
					cancelColor:"#c8c8c8",
					success(res) {
						that.test4();	
					}
				})					
				},2000); 
			},
			test4(){
				setTimeout(()=>{
					this.bacterium=5;
					let msg="猪舍细菌数超标，请尽快清洁猪舍！";
					this.addMsg(msg);
					this.plusCount();					
				uni.showModal({
					title:"警告",
					content:"猪舍细菌数超标，请尽快清洁猪舍！",
					cancelText:"忽略",
					cancelColor:"#c8c8c8",
					success(res) {
						
					}
				})					
				},2000); 
			},
			toFeed(){
				uni.navigateTo({
					url:"feed/feed"
				});
			}
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	.top{
		width: 100%;
		height: 140px;
		background: linear-gradient(to right, #1d6efb , #42beff);
		box-shadow: #000000 0px 1px 33px;
	}
	.top view{
		margin-top: 8%;
		margin-left: 5%;
		display: flex;
		
	}
	.top view text{
		font-size: 24px;
		color: #FFFFFF;
	}
	
	.bars{
		margin-left: 10%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.item{
		width: 100%;
		display: flex;
		margin-top: 5%;
	}
	.symbol{
		width: 80px;
		height: 80px;
		background: #a5c7ec;
		border-radius: 50px;
		text-align: center;

	}
	.symbol text{
		line-height: 80px;
		font-size: 20px;
		color: #FFFFFF;
	}
	.bar-box{
		width: 60%;
		margin-left: 5%;
		display: flex;
		flex-direction: column;
	}
	.bar-title{
	}
	.bar-title text{
		color: #b5b5b5;
		margin-left: 18%;
		font-size: 18px;
	}
	.bar{
		width: 100%;
	}
	.s{
		border-radius: 20px 20px;
		background: linear-gradient(90deg, #a6d4ad 30%, #ef8338 60%, #e50043 100%);
	}
	.btns{
		width: 100%;
		margin-top: 3%;
		display: flex;
	}
	.back{
		background: #86d997;
		color: #FFFFFF;
		width: 30%;
		height: 48px;
		font-size: 20px;
/* 		margin: 4% 5% 5% 66%; */
		padding-bottom: 4%;
	}
	.toFeed{
		background: #86d997;
		color: #FFFFFF;
		width: 30%;
		height: 48px;
		font-size: 20px;
/* 		margin: 4% 5% 5% 16%; */
		padding-bottom: 4%;		
	},
	.degree{
		text-align: center;
		color: #2478FC;
	}
</style>
